<template>
  <view class="page">
    <!-- 标题栏 start -->
    <fu-custom :isBack="true" bgColor="bg-white" class="header" :isBottom="true">
      <block slot="content">注销账号</block>
      <block slot="right">
      </block>
    </fu-custom>
    <view class="flex flex-direction margin solid-bottom padding-bottom">
      <view class="flex align-center">
        <image class="cancel-img margin-right-sm" src="../../static/account-cancel.png" mode=""></image>
        <text class="text-bold text-lg">账号注销</text>
      </view>
      <view class="margin-top">
        永久注销且无法恢复，请谨慎操作
      </view>
    </view>
    <view class="margin-lr solid-bottom">
      <view class="text-bold text-lg">请选择注销账号的原因：</view>
      <view class="margin-top">
        <view @click="onChangeReson(item, index)" class="item flex align-center" v-for="(item, index) in reasonList"
          :key="index">
          <image v-if="index == cancelObj.current" class="item-img" src="../../static/icon-select-2.png"
            mode="aspectFit"></image>
          <image v-else src="../../static/icon-select-1.png" mode="aspectFit" class="item-img">
            <view class="item-label">{{ item.name }}</view>
          </image>
        </view>
      </view>
    </view>
    <view class="flex flex-direction margin solid-bottom padding-bottom">
      <view class="flex align-center">
        <text class="text-bold text-lg">请填写注销原因：</text>
      </view>
      <view class="margin-top">
        <input type="text" placeholder="请输入~" v-model="cancelReason" />
      </view>
    </view>
    <view class="login-btn" @click="handleNext">
      下一步
    </view>
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cancelObj: {
          //订单取消对象
          current: -1, //当前原因索引
          id: null, //当前id
        },
        reasonList: [],
        checked: false,
        cancelReason: ''
      }
    },
    onLoad() {
      this.getData()
    },
    methods: {
      onChangeReson(item, index) {
        if (this.cancelObj.current == index) return false;
        this.cancelObj.current = index;
        this.cancelObj.id = item.id;
      },
      // 获取注销原因
      getData() {
        this.$api.post(global.apiUrls.cancelAccount).then(res => {
          if (res.data.code == 1) {
            console.log(res.data)
            this.reasonList = res.data.data
            // 初始化默认选中
            if (this.reasonList.length > 0) {
              this.cancelObj.current = 0
              this.cancelObj.id = this.reasonList[0].id
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            });
          }
        })
      },
      handleNext() {
        // cancelAccountSub
        if (!this.cancelReason) {
          this.$message.info('请输入注销原因');
          return
        }
        uni.navigateTo({
          url: `/pages/index/setting/account-cancel-risk/index?cancelReason=${this.cancelReason}&cancelId=${this.cancelObj.id}`
        })
        return
        console.log(this.cancelObj)
        uni.showLoading({
          title: '请稍等'
        });
        setTimeout(() => {
          this.$api.post(global.apiUrls.cancelAccountSub, {
            id: this.cancelObj.id
          }).then(res => {
            uni.hideLoading();
            if (res.data.code == 1) {
              console.log(res.data)
              var cancelList = [...res.data.data.express, ...res.data.data.not_receive, ...res.data.data
                .not_yet_shipped
              ]
              console.log(cancelList)
              this.$store.commit('getCancelAccount', cancelList);
              // 注销失败
              uni.redirectTo({
                url: '/pages/index/setting/result/index'
              })
            } else if (res.data.code == 2) {
              //  注销成功
              this.$store.commit('logout');
              this.$store.dispatch('getCartList');
              uni.redirectTo({
                url: '/pages/index/setting/result/index?isSuccess=1'
              })
            } else {
              //  其他情况错误码
              uni.showToast({
                title: res.data.msg,
                icon: 'none'
              });
            }
          })
        }, 500)
      }
    },
  }
</script>

<style>
	page {
	  height: 100%;
	  background: #ffffff;
	}
</style>

<style lang="scss" scoped>
  page {
    height: 100%;
    background: #ffffff;
  }

  .cancel-img {
    width: 34rpx;
    height: 36rpx;
  }

  .content {
    min-height: 800rpx;
  }

  .agreement {
    display: flex;
    width: 100%;
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #666666;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;

    .image {
      height: 28rpx;
      width: 28rpx;
      margin-right: 12rpx;
    }

    text {
      color: #FFA133;
    }
  }

  .login-btn {
    height: 88rpx;
    line-height: 88rpx;
    background: $bgtheme;
    opacity: 1;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    position: fixed;
    bottom: 64rpx;
    left: 32rpx;
    right: 32rpx;
  }

  .checkbox-list {
    padding: 20rpx 15rpx;
  }

  .item {
    padding-bottom: 32rpx;

    .item-img {
      width: 32rpx;
      height: 32rpx;
    }

    .item-label {
      margin-left: 10rpx;
    }
  }
</style>
